<template>
  <div>
    <a-upload multiple :showUploadList="false" :before-upload="beforeUpload"
     accept=".docx, .doc, .xlsx, .xls, .pdf, .jpeg, .png">
      <a-button style="margin-bottom: 10px">
        <a-icon type="upload"/>
        选择文件
      </a-button>
    </a-upload>
    <a-table
      ref="table"
      size="default"
      rowKey="uid"
      :columns="columns"
      :pagination="false"
      :dataSource="copyFileList"
      class="file-table">
      <template slot="icon" slot-scope="text, record">
        <img :src="fileIcon" alt="">
      </template>
      <template slot="name" slot-scope="text, record">
        <j-ellipsis :value="text" :length="30"/>
      </template>
      <span slot="action" slot-scope="text, record">
          <a-button v-if="record.status === 1" @click="OnPerview(record)" type="link" title="预览">
                  <a-icon type="eye"/></a-button>
          <a-button v-if="record.status === 0" @click="upload(record)" type="link" title="上传">
            <a-icon type="caret-right"/></a-button>
          <a-button v-if="record.status === 1" type="link" title="上传完成">
            <a-icon type="check" style="color:green"/></a-button>
          <a-button v-if="record.status === 2" type="link">
            <a-icon type="loading"/></a-button>
          <a-button @click="remove(record)" type="link" title="删除">
            <a-icon type="close" style="color:red"/></a-button>
      </span>
    </a-table>
    <div class="rem">只能上传Excel类型的文件，包括xls,xlsx,可上传多个，单个文件不超过10M</div>
  </div>
</template>

<script>
  import {uploadAction, getAction, deleteAction} from '@/api/manage'
  import fileIcon from './file.png'
  import {Base64} from "js-base64";

  const columns = [
    {
      title: 'icon',
      width: 30,
      align: 'right',
      dataIndex: 'icon',
      scopedSlots: {customRender: 'icon'},
      key: 'icon',
    },
    {
      title: '文件名',
      dataIndex: 'name',
      scopedSlots: {customRender: 'name'},
      key: 'name',
    },
    {
      title: '操作',
      align: 'right',
      dataIndex: 'action',
      width: 120,
      slots: {title: 'actionName'},
      scopedSlots: {customRender: 'action'}
    }
  ];
  export default {
    name: "index",
    data() {
      return {
        fileIcon: fileIcon,
        columns: columns,
        uploading: false,
        copyFileList: [],
        id: ''
      };
    },
    methods: {
      OnPerview(record) {
        const fileUrl = `${window._CONFIG['onlinePreviewFileURL']}/sys/common/static${record.path}`
        // const url = `${window._CONFIG['onlinePreviewDomainURL']}?url=${encodeURIComponent(fileUrl)}`
        const url = `${window._CONFIG['onlinePreviewDomainURL']}?url=${encodeURIComponent(Base64.encode(fileUrl))}`
        window.open(url, '_blank')
      },
      remove(record) {
        if (record.path) {
          this.ApiDel(record, {url: record.path})
        }
        for (let item of this.copyFileList) {
          if (record.uid === item.uid) {
            const index = this.copyFileList.indexOf(item);
            this.copyFileList.splice(index, 1);
          }
        }
      },
      upload(record) {
        this.handleUpload(record)
      },
      uploadAll() {
        for (let item of this.copyFileList) {
          if (item.status === 0) {
            this.handleUpload(item)
          }
        }
      },
      beforeUpload(file) {
        this.copyFileList.push({uid: file.uid, name: file.name, status: 0, file: file})
        this.uploadAll()
        return false;
      },
      handleUpload(record) {
        record.status = 2
        const formData = new FormData();
        formData.append('files', record.file);
        formData.append('id', this.id);
        this.ApiSave(record, formData)
      },
      ApiSave(record, formData) {
        uploadAction('/sjcj/dataCollectionTaskDetail/uploadData', formData).then((res) => {
          if (res.success) {
            record.status = 1
            record.path = res.result[0].uploadFileUrl
            this.$message.success(`上传成功`)
          } else {
            record.status = 0
            this.$message.warning(res.message)
          }
        })
      },
      ApiDel(record, path) {
        deleteAction('/sjcj/dataCollectionTaskDetail/deleteFile', {...path, id: this.id}).then((res) => {
          if (res.success) {
            this.$message.success(res.message)
          } else {
            this.$message.warning(res.message)
          }
        })
      }
    },
  }
</script>

<style scoped lang="less">
  .file-table {
    /deep/ .ant-btn-link {
      padding: 0 5px !important;
    }

    /deep/ .ant-table-thead {
      display: none;
    }

    /deep/ .ant-table-tbody {
      tr {
        width: 100%;
        margin-bottom: 5px !important;

        td {
          padding: 0 5px;
          background-color: #f5f5f5;
          border: 0;
        }
      }
    }
  }

  .rem {
    margin-top: 5px;
    color: #bab9b9;
    font-size: 13px !important;
  }
</style>